import React, { Component } from 'react';
import { TabBar, Toast } from 'antd-mobile'
import { StarOutline, SendOutline, AppstoreOutline, ShopbagOutline, UserOutline } from 'antd-mobile-icons';
import "../styles/goodsaction.css"
import { withRouter } from 'react-router-dom'
import { good_fav, shopcart_add } from "../api/index";
// @withRouter
class MyTabbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabs: [
                {
                    key: '/index/shoucang',
                    title: '收藏',
                    icon: <StarOutline />
                },
                {
                    key: '/index/hom',
                    title: '分享',
                    icon: <SendOutline />
                },
                {
                    key: '/index/gouwuche',
                    title: '购物车',
                    icon: <AppstoreOutline />
                },
                {
                    key: '/shopcart',
                    title: '加入购物车',
                    // icon: <ShopbagOutline />
                },
                {
                    key: 'gocart',
                    title: '立即购买',
                    // icon: <UserOutline />
                },
            ],
            activeKey: '/index/home',
            currentIndex: 0,
        }
    }
    handleChange(key) {
        console.log(key);
        // this.props.history.push(`/index/shopcart/${this.props.id}`);
        if (key == '/index/shoucang') {
            console.log("0");
            // this.props.history.push('/index/hom')
            good_fav({ userid: localStorage.getItem('id'), goodid: this.props.id }).then(res => {
                console.log(res.data);
            })
            Toast.show({
                icon: 'success',
                content: '收藏成功,可以个人中心查看',
            })

        }
        else if (key = '/index/shopcart') {
            shopcart_add({ userid: localStorage.getItem('id'), goodid: this.props.id }).then(res => {
                console.log(res.data);
            })
            Toast.show({
                icon: 'success',
                content: '加入购物车成功',
            })
           
        }
        else if (key = 'gocart') {
            shopcart_add({ userid: localStorage.getItem('id'), goodid: this.props.id }).then(res => {
                console.log(res.data);
            })
            Toast.show({
                icon: 'success',
                content: '加入购物车成功',
            })
        }
         this.props.history.push("/index/shopcart")
  

    }
    handleclick(index) {
        console.log(index);
        if (index == 0) {
            console.log("0");
            // this.props.history.push('/index/hom')
            good_fav({ userid: localStorage.getItem('userid'), goodid: this.props.id }).then(res => {
                console.log(res.data);
            })

        }
    }
    render() {
        // console.log("三翻四复" + this.props.id)
        return (
            <div className='mytabbar'>
                <TabBar activeKey={this.state.activeKey}
                    onChange={(key) => { this.handleChange(key) }}
                >
                    {
                        this.state.tabs.map((item, index) => (
                            <TabBar.Item key={item.key} icon={item.icon}
                                title={item.title}
                                onClick={() => { this.handleclick(item.key) }} />
                        ))
                    }
                </TabBar>

            </div>
        );
    }
}

export default withRouter(MyTabbar);